<template>
  <div class="card content-box">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="t('system.staff.name')" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>

          <el-form-item :label="t('system.staff.tel')" prop="tel">
            <el-input v-model="ruleForm.tel" />
          </el-form-item>

          <el-form-item :label="t('system.staff.password')" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>

          <el-form-item :label="t('system.staff.job_no')" prop="job_no">
            <el-input v-model="ruleForm.job_no" />
          </el-form-item>

          <el-form-item :label="t('common.status')" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="20" border>{{ $t("system.staff.disable") }}</el-radio>
              <el-radio :label="10" border>{{ $t("system.staff.normal") }}</el-radio>
              <el-radio :label="100" border>{{ $t("system.staff.abnormal") }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="t('system.staff.introduction')" prop="introduction">
            <el-input v-model="ruleForm.introduction" :rows="3" type="textarea" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="t('system.staff.induction')" prop="induction">
            <el-date-picker
              v-model="ruleForm.induction"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              :clearable="false"
            />
          </el-form-item>

          <el-form-item :label="t('system.staff.quit')" prop="quit">
            <el-date-picker
              v-model="ruleForm.quit"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              :clearable="false"
            />
          </el-form-item>

          <el-form-item :label="t('system.staff.dept_name')" prop="dept_id">
            <SelectV3 v-model="ruleForm.dept_id" :url="departmentList" />
          </el-form-item>

          <el-form-item :label="t('system.staff.pos_name')" prop="pos_id">
            <SelectV3 v-model="ruleForm.pos_id" :url="positionList" />
          </el-form-item>

          <el-form-item :label="t('system.staff.role_name')" prop="role_ids">
            <SelectV3 v-model="ruleForm.role_ids" :url="departmentList" />
          </el-form-item>

          <el-form-item :label="t('system.staff.ethnic_name')" prop="ethnic_id">
            <Ethnic v-model="ruleForm.ethnic_id" />
          </el-form-item>

          <el-form-item :label="t('system.staff.education_name')" prop="education_id">
            <Education v-model="ruleForm.education_id" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"></el-col>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="dynamicForm">
import { reactive, ref, onBeforeMount } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { staffCreate, staffModify, staffDetail, departmentList, positionList } from "@/api/modules/system";
import { useTabsStore } from "@/stores/modules/tabs";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import SelectV3 from "@/components/SelectV3/index.vue";
import Education from "@/components/Education/index.vue";
import Ethnic from "@/components/Ethnic/index.vue";

const route = useRoute();
const { t } = useI18n();

const ruleForm = reactive({
  id: 0,
  name: "",
  password: "",
  job_no: "",
  status: 20,
  dept_id: "",
  role_ids: "",
  pos_id: "",
  ethnic_id: "",
  education_id: "",
  avatar: "",
  introduction: "",
  induction: "",
  quit: ""
});

const tabStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: t("system.staff.rule.name"), trigger: "blur" }],
  password: [{ required: true, message: t("system.staff.rule.password"), trigger: "blur" }],
  tel: [{ required: true, message: t("system.staff.rule.tel"), trigger: "blur" }],
  status: [{ required: true, message: t("common.rule.status"), trigger: "blur" }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      const action = ruleForm.id > 0 ? staffModify : staffCreate;
      action(ruleForm).then(response => {
        ElMessage.success(response.message);
        setTimeout(() => {
          if (route.meta.isAffix) return;
          tabStore.removeTabs(route.fullPath);
          keepAliveStore.removeKeepAliveName(route.name as string);
        }, 200);
      });
    } else {
      ElMessage.error("请根据提示输入信息！");
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const getDetail = (id?: Number) => {
  if (id > 0) {
    staffDetail({ id }).then(response => {
      ruleForm.id = response.data.id;
      ruleForm.name = response.data.name;
      ruleForm.parent_id = response.data.parent_id;
      ruleForm.status = response.data.status;
    });
  }
};

onBeforeMount(() => {
  getDetail(route.params.id);
});
</script>

<style scoped lang="scss">
@import "./edit.scss";
</style>
